<template>
  <van-search  show-action label="地址" placeholder="请输入搜索关键词" @click="onSearch">
    <template #action>
      <div @click="onClickButton" v-show="!flag">登录</div>
      <div @click="onClickButton" v-show="flag">我的</div>
    </template>
  </van-search>
  <van-grid square>
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>
  <div class="box3">
    <b>京东秒杀</b>
    <p>20点专场</p>
    <van-count-down :time="time">
    <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
     </template>
    </van-count-down>
  </div>
  <div>
    <ul class="box4">
      <li v-for="item in arr" :key="item.proid">
        <img :src="item.img1" width="65" height="80">
        <p>￥{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
  <div>
    <van-list v-model:loading="loading" :finished="finished" @load="onload">
      <ul class="box5">
        <li v-for="item in list" :key="item.proid" @click="de(item.proid)">
          <img :src="item.img1" style="width:150px">
          <p>{{ item.proname }}</p>
          <p>￥{{ item.originprice }}</p>
        </li>
      </ul>
    </van-list>
  </div>
  <tabber></tabber>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import {ref,reactive,computed} from "vue"
import tabber from '@/components/tabber.vue';
import {getProductList} from "@/service/home"
let router = useRouter()
const onClickButton = ()=>{
  router.push("/login")
}
const onSearch = ()=>{
  router.push("/search")
}
let time = ref(60*1000*1000)
let count = ref<number>(1)
let limitNum = ref<number>(10)
let loading = ref<boolean>(false)
let finished = ref<boolean>(false)
let arr= reactive<any>([])
let list = reactive<any>([])
const onload = ()=>{
  getProductList(count.value,limitNum.value).then((res)=>{
     list = list.concat(res.data)
     arr = list.slice(0,6)
     loading.value=false
     count.value++
     if (list.length >= 150) {
          finished.value = true;
        }
})
}
const flag= computed(()=>{
  return localStorage.getItem("token")
})
const de = (id:any)=>{
  router.push("/detail/"+id)
}
</script>

<style scoped>

.box3 {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.box3 b {
  font-size: 18px;
  margin-left: 20px;
}

.box3 p {
  font-size: 18px;
  margin-left: 50px;
  color: red;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color:red;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
  }
  .box4 {
  width: 100%;
  display: flex;
  font-size: 15px;
  color: red;
}

.box5 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box5 li {
  width: 47%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  margin-left: 10px;
}
.box5 li p{
  width: 150px;
}
.box5 li p:nth-of-type(2){
  color: red;
}
</style>